<!-- src/pages/main/common/IllegalGateRecords.vue -->
<template>

  <view>
    <z-paging ref="paging" v-model="dataList" @query="queryList">
		<template #top>
			<tn-navbar>手动开闸 </tn-navbar>
      <view class="tn-shadow  ">
        <view class="tn-flex tn-mt-sm justify-end tn-pr-sm  tn-pb-sm ">
          <view class="tn-flex tn-blue_text" @click="openEditPopup"><tn-icon name="filter"></tn-icon>筛选</view>
        </view>
      </view>
		</template>
  <view class="tn-flex tn-flex-column tn-align-start tn-p-sm">
   
    <view class="stats-card tn-shadow-md tn-radius tn-mb-sm">
      <view class="stats-content tn-flex tn-justify-between">
        <view class="stat tn-flex tn-flex-column tn-align-center">
          <view class="stat-label">软件开闸</view>
          <view class="stat-value">{{ softCounts }}</view>
        </view>
        <view class="stat tn-flex tn-flex-column tn-align-center">
          <view class="stat-label">遥控开闸</view>
          <view class="stat-value">{{ remoteControlSonCounts }}</view>
        </view>
      </view>
    </view>
    <view id="records-container" class="tn-flex tn-flex-column">
      <view v-for="(record,index) in dataList" :key="index" class="record-card tn-shadow-md tn-radius tn-mb-sm">
        <view class="record-header tn-flex tn-justify-between tn-align-center">
          <text class="plate-number">{{ record.checkPointName }}</text>
          <text>{{ record.deviceSerialNumber.substring(0, 7)+'*****' }}&nbsp;&nbsp;{{ record.userName }}</text>
        </view>
        <view class="record-header">
          <text>{{ record.newApplicationTime }}</text>
          <text :class="['status-badge', record.signalSource == 0 ? 'status-unhandled' : 'status-handled']">{{ record.applicationReason }}</text>
        </view>
      </view>
    </view>
  </view>
  <template #loadingMoreNoMore> </template>
</z-paging>
    <tn-popup v-model="isPopupVisible" width="80%" top="230rpx" open-direction="top" :overlay="false" :radius="25">
      <view class="tn-shadow  tn-p-sm  tn-border  tn-border-bottom  tn-border-top tn-gray-disabled_border">
        <tn-form ref="formRef" :model="formData" label-position="top">
          <tn-form-item label="申请时间">
            <view class="tn-flex justify-between">
              <view>
                <tn-input @focus="openPickerDate('minApplicationTime')" :model-value="formData.minApplicationTime" placeholder="申请时间>=">
                  <template #suffix>
                    <view class="tn-ml tn-mr" @click="cleanInputValue('minApplicationTime')">
                      <tn-icon name="delete" color=" tn-gray_bg"></tn-icon>
                    </view>
                  </template>
                </tn-input>
              </view>-<view>
              <tn-input @focus="openPickerDate('maxApplicationTime')" :model-value="formData.maxApplicationTime" placeholder="申请时间<=">
                <template #suffix>
                  <view class="tn-ml tn-mr" @click="cleanInputValue('maxApplicationTime')">
                    <tn-icon name="delete" color=" tn-gray_bg"></tn-icon>
                  </view>
                </template>
              </tn-input>
            </view>
            </view>
          </tn-form-item>
          <tn-form-item label="通道和方式">
            <view class="tn-flex justify-between">
              <view>
                <tn-input @focus="openPicker('checkPointList')" :model-value="selectOptions.checkPointLabel[formData.checkPointId]" placeholder="请选择通道">
                  <template #suffix>
                    <view class="tn-ml tn-mr" @click="cleanInputValue('checkPointId')">
                      <tn-icon name="delete" color=" tn-gray_bg"></tn-icon>
                    </view>
                  </template>
                </tn-input>
              </view>
              <view>
                <tn-input @focus="openPicker('signalSourceList')" :model-value="selectOptions.signalSourceLabel[formData.signalSource]" placeholder="请选择操作方式">
                  <template #suffix>
                    <view class="tn-ml tn-mr" @click="cleanInputValue('signalSource')">
                      <tn-icon name="delete" color=" tn-gray_bg"></tn-icon>
                    </view>
                  </template>
                </tn-input>
              </view>
            </view>
          </tn-form-item>

<!--          <tn-form-item label="设备">-->
<!--            <view class="tn-flex justify-between">-->
<!--              <view>-->
<!--                <tn-input v-model="formData.deviceSerialNumber" placeholder="序列号">-->
<!--                  <template #suffix>-->
<!--                    <view class="tn-ml tn-mr" @click="cleanInputValue('deviceSerialNumber')">-->
<!--                      <tn-icon name="delete" color=" tn-gray_bg"></tn-icon>-->
<!--                    </view>-->
<!--                  </template>-->
<!--                </tn-input>-->
<!--              </view>-->
<!--            </view>-->
<!--          </tn-form-item>-->
        </tn-form>

        <view class="tn-mt tn-flex justify-evenly  ">
          <tn-button @click="closePopup" text-color="tn-white" bg-color="tn-grey_bg
">取消</tn-button>
          <tn-button @click="confirmEdit" text-color="tn-white" >确认</tn-button>
        </view>
      </view>


    </tn-popup>
    <!-- 时间选择器 -->
    <tn-date-time-picker v-model:open="openPickerDateVisible" mode="datetime" @confirm="confirmPickerDate" @close="closePickerDate" />
    <!-- 字典选择器 -->
    <tn-picker v-model:open="openPickerVisible" :data="pickerData" @confirm="confirmPicker" @close="closePicker" />
</view>
</template>


<script setup lang="ts">
import {onMounted, ref, computed, type Ref} from "vue";
	import { tnParamById } from "@/utils/tnUtil";
  import CfCarParkUtil from "@/cfsheep/api/cfCarPark/park";
import {onLoad} from "@dcloudio/uni-app";
import {parseTime} from "@/cfsheep/util";
import CfIOTUtil from "@/cfsheep/api/iot/iot";
import dayjs from "dayjs";

	const inputValue = ref("");
	// 模拟数据
	const tempList = ref([]);
  const carParkId = ref(0);
  const remoteControlSonCounts = ref(0);  //遥控器
  const softCounts = ref(0);  //人工通过软件开闸

  const formData = ref({
    minApplicationTime: null,
    maxApplicationTime: null,
    deviceSerialNumber:null,
    uid:null,
    signalSource:null,
    checkPointId:null,
  });

  const cleanInputValue = (valueType: string) => {
    formData.value[valueType] = null;
  };

  // 下拉筛选- 筛选索引
  const isPopupVisible = ref(false);
  const openEditPopup = (value : any) => {
    isPopupVisible.value = true;
  };

  const closePopup = () => {
    isPopupVisible.value = false;
  };
  const confirmEdit = () => {
    // 确认修改逻辑
    closePopup();
    queryList(1, 10);
  };


  // 日期时间筛选-选择器key
  const pickerDateKey = ref('');

  // 日期时间控制选择器的可见性
  const openPickerDateVisible = ref(false);

  // 打开日期时间选择器
  const openPickerDate = (type: any) => {
    pickerDateKey.value = type;
    openPickerDateVisible.value = true; // 显示选择器
  };

  // 关闭日期时间选择器
  const closePickerDate = () => {
    openPickerDateVisible.value = false; // 隐藏选择器
  };

  // 确认日期时间选择器的选择
  const confirmPickerDate = (value : any) => {
    formData.value[pickerDateKey.value] = value;
    closePickerDate(); // 关闭选择器
  };

  //下拉框数据
  const selectOptions = ref({
    dict: {
      checkPointList: [],
      carTypeList: [],
      signalSourceList: [
        { label: "遥控", text: "遥控", value: 0 },
        { label: "软件", text: "软件", value: 1 }
      ],
    },
    checkPointLabel: {},
    signalSourceLabel: {0: '遥控', 1: '软件'},
  });

  // 选择器key
  const pickerKey = ref('');
  // 选择器数据
  const pickerData = ref([]);

  // 控制选择器的可见性
  const openPickerVisible = ref(false);

  // 打开选择器
  const openPicker = (type:any)  => {
    pickerKey.value = type;
    pickerData.value = selectOptions.value.dict[type];
    openPickerVisible.value = true; // 显示选择器
  };

  // 关闭选择器
  const closePicker = () => {
    openPickerVisible.value = false; // 隐藏选择器
  };

  // 确认选择器的选择
  const confirmPicker = (value: any) => {
    switch (pickerKey.value){
      case "checkPointList":
        formData.value.checkPointId = value;
        break;
      case "signalSourceList":
        formData.value.signalSource = value;
        break;
    }
    closePicker(); // 关闭选择器
  };

	// z-paging 示例
	const paging = ref(null);
	// 数据列表
	const dataList: Ref<CfCarParkReleaseLog[]> = ref();

	const queryList = async (pageNo: number, pageSize: number) => {
    let params = {
      page: pageNo,
      size: pageSize,
      orderByDesc: 'application_time',
      carParkId: carParkId.value
    };
    if(formData.value.minApplicationTime !== null){
      params.minApplicationTime = dayjs(formData.value.minApplicationTime).valueOf();
    }
    if(formData.value.maxApplicationTime !== null){
      params.maxApplicationTime = dayjs(formData.value.maxApplicationTime).valueOf();
    }

    if(formData.value.deviceSerialNumber !== null){
      params.deviceSerialNumber = formData.value.deviceSerialNumber;
    }
    if(formData.value.uid !== null){
      params.uid = formData.value.uid;
    }
    if(formData.value.signalSource !== null){
      params.signalSource = formData.value.signalSource;
    }
    if(formData.value.checkPointId !== null){
      params.checkPointId = formData.value.checkPointId;
    }
    const _releaseLogList = await CfCarParkUtil.getReleaseLogListByQuery(params);
    if (_releaseLogList.code == 10002) {
      for (const i of _releaseLogList.data) {
        i.newApplicationTime = parseTime(i.applicationTime, null) || '-';
      }
      dataList.value = _releaseLogList.data;
    } else {
      dataList.value = [];
    }
    paging.value.complete(dataList.value);
	};

  const getReleaseLogCounts = async (_signalSource: number) => {
    const _releaseLogList = await CfCarParkUtil.getReleaseLogCountsByQuery({
      signalSource: _signalSource,
      carParkId: carParkId.value
    });
    if (_releaseLogList.code == 10002) {
      if(_signalSource==0){
        remoteControlSonCounts.value = _releaseLogList.data;
      }else{
        softCounts.value = _releaseLogList.data;
      }
    }
  };

  /**
   * 拉取出入口通道
   */
  const getCheckPointList = async () => {
    const _checkPointList = await CfIOTUtil.getCheckPointListByQuery({
      page: 1,
      size: 200,
      areaId: carParkId.value
    })
    if (_checkPointList.code == 10002) {
      for (const i of _checkPointList.data) {
        selectOptions.value.checkPointLabel[i.id] = i.name;
        selectOptions.value.dict.checkPointList.push({
          label: i.name,
          text: i.name,
          value: i.id
        });
      }
    }
  }
    
   
    const currentPage = ref(1);
 
   
    const totalViolations  = ref(0);
    const unhandledCount = ref(0);
    const totalPages =  ref(0);
   

    const filterRecords = () => {
      // 过滤记录的逻辑
    };

    const filterByDate = () => {
      uni.showToast({ title: '日期筛选功能正在开发中', icon: 'none' });
    };

    const prevPage = () => {
      if (currentPage.value > 1) {
        currentPage.value--;
      }
    };

    const nextPage = () => {
      if (currentPage.value < totalPages.value) {
        currentPage.value++;
      }
    };

    const addRecord = () => {
      uni.showToast({ title: '添加新记录功能正在开发中', icon: 'none' });
    };

  onLoad((params) => {
    if (params != undefined) {
      carParkId.value = params.id;
      getReleaseLogCounts(0);
      getReleaseLogCounts(1);
      getCheckPointList();
    }
  });
</script>

<style scoped>
.container {
  max-width: 600px;
  margin: 0 auto;
  padding-bottom: 80px;
  background-color: #f0f4f8; /* 背景颜色 */
  font-family: 'PingFang SC', 'Helvetica Neue', 'Arial', sans-serif; /* 字体 */
}
.title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #2d3748;
}
.stats-card {
  background-color: #3182ce; /* 统计卡片背景颜色 */
  color: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.stats-content {
  display: flex;
  justify-content: space-between;
}
.stat {
  text-align: center;
}
.stat-label {
  font-size: 14px;
  opacity: 0.8;
}
.stat-value {
  font-size: 24px;
  font-weight: bold;
}
.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.search-input {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 16px;
}
.search-button, .filter-button, .pagination-button {
  padding: 10px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  background-color: #4299e1; /* 按钮背景颜色 */
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}
.search-button:hover, .filter-button:hover, .pagination-button:hover {
  background-color: #3182ce; /* 按钮悬停颜色 */
}
.record-card {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.plate-number {
  font-weight: bold;
  color: #2d3748;
}
.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}
.status-unhandled {
  background-color: #feb2b2; /* 未处理状态颜色 */
  color: #9b2c2c;
}
.status-handled {
  background-color: #9ae6b4; /* 已处理状态颜色 */
  color: #22543d;
}
.record-details {
  font-size: 14px;
  color: #4a5568;
}
.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.add-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #3182ce; /* 添加按钮背景颜色 */
  color: white;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.3s;
}
.add-button:hover {
  background-color: #2c5282; /* 添加按钮悬停颜色 */
}
</style>
